<template>
  <div class="yjx-drug">
    <div class="yjx-home-floor2">
      <HealthTips />
      <Carousel class="carousel" />
      <time-line />
    </div>

    <div class="yjx-home-floor3">
      <a-card class="big-card" style="width: 1200px" title="常 规 家 政 服 务" :tab-list="tabList" :active-tab-key="key"
        @tabChange="(key) => onTabChange(key, 'key')">
        <span slot="extra" class="more"><router-link to="/category">更多</router-link></span>
        <div class="drug-allCard">
          <a-card hoverable style="width: 270px" class="drug-card" v-for="item in drugInfoList">
            <img slot="cover" alt="图片加载失败" :src="item.img" @click="goToDetails(item.id)" />
            <template slot="actions" class="ant-card-actions">
              <div @click="changeDrugStatus(item)" v-if="!nameArr.includes(item.name)">
                <a-icon key="star" type="star" />&nbsp;收藏
              </div>
              <div @click="changeDrugStatus(item)" v-else>
                <a-icon type="star" theme="filled" />&nbsp;已收藏
              </div>
              <div @click="goToDetails(item.id)">
                <a-icon key="shopping" type="shopping" />&nbsp;购买
              </div>
              <div @click="goToDetails(item.id)">
                <a-icon key="profile" type="profile" />&nbsp;详情
              </div>
            </template>
            <a-card-meta :title="item.name" description="" @click="goToDetails(item.name)">
            </a-card-meta>
            <span style="
                color: #f34e0d;
                font-size: 18px;
                display: inline-block;
                margin-top: 8px;
                font-family: Verdana, Geneva, Tahoma, sans-serif;
              ">￥{{ parseFloat(item.referencePrice).toFixed(2) }}</span>
          </a-card>
        </div>
      </a-card>
    </div>

    <NewDrugs />
    <!-- <HotTips />-->
  </div>
</template>

<script>
import Carousel from "@/components/Carousel.vue";
import HealthTips from "@/components/HealthTips.vue";
import TimeLine from "@/components/TimeLine.vue";
import HotTips from "@/views/home/components/HotTips.vue";
import NewDrugs from "@/views/home/components/NewDrugs.vue";
import axios from "axios";

export default {
  components: { Carousel, HealthTips, TimeLine, HotTips, NewDrugs },
  name: "Drug",
  data() {
    return {
      // tabList: [
      //   {
      //     key: "0",
      //     tab: "家政",
      //   },
      //   {
      //     key: "1",
      //     tab: "月嫂",
      //   },
      //   {
      //     key: "2",
      //     tab: "育婴",
      //   },
      //   {
      //     key: "3",
      //     tab: "保姆",
      //   }
      // ],
      tabList: [],
      key: "1678649931106705409",
      drugInfoList: [],
      nameArr: [],
      params: {
        pageNum: 1,
        pageSize: 10,
        serveTypeId: null,
      },
    };
  },
  created() {
    this.getTypeInfo();
    this.getDrugInfoList();
    this.getThisUserFavorites();
  },
  methods: {
    onTabChange(key, type) {
      // console.log(key, type);
      // console.log(this.tabList[key].tab);
      this[type] = key;
      // console.log(this[type]);
      this.getDrugInfoList();
    },

    getTypeInfo() {
      const url = 'http://localhost:8080/system/serveType/list';
      axios.get(url)
        .then(response => {
          // 将原始数据转换为只包含 key 和 tab 的对象数组  
          this.tabList = response.data.rows.map(row => ({
            key: row.id,
            tab: row.name
          }));
          //console.log(this.tabList); // 使用 this.tabList 而不是 tabList  
        })
        .catch(error => {
          console.error('Error fetching type info:', error);
          // 可以在这里添加额外的错误处理逻辑  
        });
    },

    /* 获取服务列表 */
    getDrugInfoList() {
      console.log(this.key);
      this.params.serveTypeId = this.key;
      const url = 'http://localhost:8080/system/item/list';
      axios.get(url, { params: this.params }).then(response => {
        this.drugInfoList = response.data.rows;
      });
    },
    /* 获取当前用户的收藏 */
    getThisUserFavorites() {
      if (this.$store.getters.getUser != null) {
        if (this.$store.getters.getUser.username != null) {
          this.$axios
            .get("/get/collect/name/" + this.$store.getters.getUser.username)
            .then((res) => {
              this.nameArr = res.data.data.data;
            });
        }
      }
    },
    /* 改变服务的收藏状态 */
    changeDrugStatus(item) {
      if (this.$store.getters.getUser != null) {
        if (this.$store.getters.getUser.username != null) {
          let collectInfo = {
            username: this.$store.getters.getUser.username,
            drugName: item.name,
            picture: item.picture,
            price: item.price,
          };
          this.$axios.post("/drug/collect", collectInfo).then((res) => {
            // console.log(res);
            this.getDrugInfoList();
            this.getThisUserFavorites();
            if (res.data.message === "收藏成功！") {
              this.$message.success(res.data.message);
            } else {
              return null;
            }
          });
          // console.log(this.drug);
        } else {
          this.$message.warning("请先登录！");
        }
      } else {
        this.$message.warning("请先登录！");
      }
    },
    /* 跳转到详情页   改成id*/
    goToDetails(id) {
      // console.log(name);
      const { href } = this.$router.resolve({
        path: "/drug/" + id,

      });
      window.open(href, "_blank");
    },
  },
};
</script>

<style>
@import "./style/drug.css";
</style>
